<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
    <style>
        button{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<button id="b1">search:获取或设置当前的url的查询字符串</button><br>
<button id="b2">hash:获取当前url的锚点部分</button><br>
<button id="b3">host:获取当前url的主机名和端口</button><br>
<button id="b4">hostname:获取当前url的主机名</button><br>
<button class="b">href:获取当前url</button><br>
<button class="b">pathname:获取当前url的路径名</button><br>
<button class="b">port:获取当前url的端口号</button><br>
<button class="b">protocol:获取当前url的协议</button><br>
<button class="b">assign(url):触发窗口加载并显示指定url内容</button><br>
<button class="b">replace(url):用给定的url来替换当前的资源</button><br>
<button class="b">reload([]):刷新当前页面</button><br>
        <script>
            let b1=document.getElementById('b1');
            b1.onclick=function (){
                console.log("search:"+location.search);
            }
            let b2=document.getElementById('b2');
            b2.onclick=function (){
                console.log("hash:"+location.hash);
            }
            let b3=document.getElementById('b3');
            b3.onclick=function (){
                console.log("host:"+location.host);
            }
            let b4=document.getElementById('b4');
            b4.onclick=function (){
                console.log("host:"+location.hostname);
            }
            let btn=document.querySelectorAll('.b');
            btn[0].onclick=function (){
                console.log("href:"+location.href);
            }
            btn[1].onclick=function (){
                console.log('pathname:'+location.pathname);
            }
            btn[2].onclick=function (){
                console.log('port:'+location.port);
            }
            btn[3].onclick=function (){
                console.log('protocol:'+location.protocol);
            }
            btn[4].onclick=function (){
                location.assign("https://www.baidu.com");
            }
            btn[5].onclick=function (){
                location.replace("https://www.baidu.com");
            }
            btn[6].onclick=function (){
                location.reload();
            }
        </script>
</body>
</html>